import React, {useEffect, useRef, useState} from 'react'
import {createStyles} from "antd-style";
import {changeTime, init, removeTime} from "@/components/page/PhotoPage3/init.ts";
import InfoViewer from "@/components/page/PhotoPage3/InfoViewer.tsx";
import PhotoController from "@/components/page/PhotoPage3/PhotoController.tsx";

const useStyle = createStyles(({css, token}) => {
    return {
        container: css`
            
        `,
        photoContainer: css`
            @keyframes toBottom {
                0% {
                    object-position: top left;
                }
                100% {
                    object-position: bottom right;
                }
            }
            
            position: fixed;
            left: 0;
            top: 0;
            z-index: -20;
            width: 100vw;
            height: 100vh;

            img {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                vertical-align: center;
                object-fit: cover;
                transition: all;
                transition-duration: ${removeTime}ms;
                opacity: 100;
                animation-name: toBottom;
                animation-timing-function: ease-in-out;
                animation-direction: normal;
                animation-duration: ${changeTime}ms;
                animation-fill-mode: forwards;
                animation-play-state: paused;
            }

            .bottom {
                animation-play-state: running;
            }

            .back {
                z-index: 10;
            }

            .front {
                z-index: 20;
            }

            .remove {
                opacity: 0;
            }
        `,

        info: css`
            
        `
    }
})

const PhotoPage3: React.FC = () => {
    const photoContainer = useRef<HTMLDivElement>();
    const styles = useStyle().styles;
    const [showInfo, setShowInfo] = useState<boolean>(true)

    useEffect(() => {
        return init(photoContainer.current)
    }, []);

    return (
        <div className={styles.container}>
            <div ref={photoContainer} className={styles.photoContainer}>

            </div>
            <div style={
                (() => {
                    if (showInfo === true) {
                        return {
                            opacity: '100%'
                        }
                    } else {
                        return {
                            opacity: '10%'
                        }
                    }
                })()
            }>
                <InfoViewer/>
                <PhotoController prop={() => {
                    setShowInfo(!showInfo)
                }}/>
            </div>
        </div>
    )
}

export default PhotoPage3